<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客主页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    </script>
</head>
<body>
    <div class="nav">
        <div class="flag">
            <img src="image/face2.png" alt="logo">
            <div class="title">我的博客系统</div>
        </div>

        <div class="page">
            <a href="blog_list.html">主页</a>
            <a href="blog_edit.html">写博客</a>
            <a href="logout">注销</a>
        </div>
    </div>
    
    <div class="container">
        <div class="left">
            <div class="card">
                <img src="image/face2.png" alt="face">
                <h3></h3>
                <a href="https://gitee.com/">gitee地址</a>
                <div class="conter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="conter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <div class="right">

            <!-- <div class="blog">
                <h3>Java是一门面向对象的语言</h3>
                <div class="date">2022-6-26 14:22:00</div>
                <div class = "desc">Java 面向对象。Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Quas eaque, blanditiis sunt praesentium ullam laudantium esse odit assumenda
                    commodi molestias illo provident quis nisi, veritatis pariatur! Commodi rerum
                    vitae beatae.
                </div>
                <a href="blog_detail.html?blogId=1">查看全文 &gt;&gt;</a>
            </div>

            <div class="blog">
                <h3>C语言详解</h3>
                <div class="date">2022-5-26 14:22:00</div>
                <div class = "desc">C生万物，编程之本。Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                    Eaque suscipit nobis autem maiores. Inventore laudantium explicabo enim! Ad omnis sunt illum 
                    dolores debitis ea nesciunt, at nemo quo optio pariatur.
                </div>
                <a href="blog_detail.html?blogId=1">查看全文 &gt;&gt;</a>
            </div>

            <div class="blog">
                <h3>人生规划</h3>
                <div class="date">2022-4-26 14:22:00</div>
                <div class = "desc">编程之路，道阻且长。Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Quas eaque, blanditiis sunt praesentium ullam laudantium esse odit assumenda
                    commodi molestias illo provident quis nisi, veritatis pariatur! Commodi rerum
                    vitae beatae.
                </div>
                <a href="blog_detail.html?blogId=1">查看全文 &gt;&gt;</a>
            </div> -->
            
        </div>
    </div>
    <!-- 这里编写前端代码：通过 ajax 给服务器发请求, 获取到所有的博客数据. 并且构造到页面上.  -->
    <script>
        function getLoginStatus() {
            $.ajax({
                type:"get",
                url:"login",
                success:function (body) {
                    // 返回 200 时，将用户信息显示到页面上
                    console.log("用户已登录!");
                    let userName = document.querySelector(".card h3");
                    userName.innerHTML = body.username;

                },
                error:function(body) {
                    // 返回 403 时，跳转到登录页
                    location.assign("login.html");
                }
            })
        }
        // 调用函数
        getLoginStatus();

        function getBlogs() {
            $.ajax({
                type:"get",
                url:"blog",
                success:function(body) {
                    let containerRight = document.querySelector(".container .right");
                    for(let blog of body) {
                        // 构造标签
                        let blogDiv = document.createElement("div");
                        blogDiv.className = "blog";
                        let title = document.createElement("h3");
                        title.innerHTML = blog.title;
                        let dateDiv = document.createElement("div");
                        dateDiv.className = "date";
                        dateDiv.innerHTML = blog.postTime;
                        let descDiv = document.createElement("div");
                        descDiv.className = "desc";
                        descDiv.innerHTML = blog.content;
                        let a = document.createElement("a");
                        a.href = "blog_detail.html?blogId="+blog.blogId;
                        a.innerHTML = "查看全文 &gt;&gt;";

                        // 组合标签
                        blogDiv.appendChild(title);
                        blogDiv.appendChild(dateDiv);
                        blogDiv.appendChild(descDiv);
                        blogDiv.appendChild(a);
                        containerRight.appendChild(blogDiv);

                    }
                }
            })
        }
        // 调用方法
        getBlogs();
    </script>

    
</body>
</html>